<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
	</head>
	<body>
		<div class="bbs">
			<header><span id="fatie" onclick="fa()">我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg"></div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）">
				所属版块：<select>
					<option >请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布" onclick="add()">
			</div>
		</div>
		<script>
			var post=document.getElementsByClassName("post")[0];
			// alert(post);
			function fa(){
				
				let display1=document.defaultView.getComputedStyle(post,null).display;
				// alert(display1);
				if(display1=="none"){
					// document.defaultView.getComputedStyle(post,null).display="block";
					// display1="block";
					document.getElementsByClassName("post")[0].style.display="block";
				}
				if(display1=="block"){
					// document.defaultView.getComputedStyle(post,null).display="none";
					document.getElementsByClassName("post")[0].style.display="none";
				}
				// document.getElementsByClassName("post")[0].style.display="block";
			}
			
			function add(){
				var btn = document.getElementById("btn");
				var ul=document.getElementById("postList");
				var newLi=ul.children[0].cloneNode(true);
				// alert(post);
				newLi.children[1].innerHTML=post.children[0].value;
				newLi.children[2].children[0].innerHTML="板块："+post.children[1].value;
				var d = new Date();
				newLi.children[2].children[1].innerHTML="发表时间："+d.toLocaleString();
				var p = document.createElement("p");
				newLi.appendChild(p);
				p.innerHTML="文本域："+post.children[2].value;
				ul.appendChild(newLi);
				//清空内容
				post.children[0].value="";
				// post.children[1].inde="";
				post.children[2].value="";
				
				fa();
			}
		</script>
	</body>
</html>
